 <%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
</head>
<title>幸运大转盘抽奖</title>
<link href="${pageContext.request.contextPath }/resource/turntable/css/activity-style.css" rel="stylesheet"
type="text/css">
<script src="${pageContext.request.contextPath }/resource/turntable/js/jquery.js" type="text/javascript"></script> 
</head>

<body class="activity-lottery-winning">
	<div class="main">
		<script type="text/javascript">
			$(function(){
			/**
				遮罩
				var loading = new loading(
						document.getElementById('loading'),{
							radius:20,circleLineWidth:8
						}
					);   
					loading.show();
			**/		
			})	
		</script>
		<div id="outercont">
			<div id="outer-cont">
				<div id="outer">
					<img src="${pageContext.request.contextPath }/resource/turntable/images/activity-lottery-1.png"
						width="310px">
				</div>
			</div>
			<div id="inner-cont">
				<div id="inner">
					<img src="${pageContext.request.contextPath }/resource/turntable/images/activity-lottery-2.png">
				</div>
			</div>
		</div>

		<div class="content">
			<div class="boxcontent boxyellow" id="result" style="display: none">
				<div class="box">
					<div class="title-orange">
						<span>恭喜你中奖了</span>
					</div>
					<div class="Detail">

						<p>
							你中了：<span class="red" id="prizetype">一等奖</span>
						</p>
						<p>
							你的兑奖SN码：<span class="red" id="sncode"></span>
						</p>
						<p class="red">本次兑奖码已经关联你的微信号，你可向公众号发送 兑奖 进行查询!</p>

						<p>
							<input name="" class="px" id="tel" type="text"
								placeholder="输入您的手机号码">
						</p>
						<p>
							<input class="pxbtn" id="save-btn" name="提 交" type="button"
								value="提 交">
						</p>
					</div>
				</div>
			</div>

			<!-- 以下代码在一开始就会显示 -->
			<div class="boxcontent boxyellow">
				<div class="box">
					<div class="title-green">
						<span>奖项设置：</span>
					</div>
					<div class="Detail">
						<p>一等奖：网时奖励200小时 。奖品数量：3</p>
						<p>二等奖：网时奖励100小时 。奖品数量：5</p>
						<p>三等奖：广播台免费点首歌 。奖品数量：10</p>
					</div>
				</div>
			</div>
			
			<!-- 隐藏域设置需要传送到后台的值  -->
			<input type="hidden" id="openid"  />

			<div class="boxcontent boxyellow">
				<div class="box">
					<div class="title-green">活动说明：</div>
					<div class="Detail">
						<p>本次活动每人可以转 3 次</p>
						<p>我们的中奖率高达33.3%！！</p>
					</div>
				</div>
			</div>
		</div>

	</div>
	
	<script type="text/javascript">
$(function(){
	//将url的值设置到隐藏域
	var openid = getQueryString("openid");//当前步骤
	$("#openid").val(openid);
	 
	//获取url参数值	  
	function getQueryString(name) { 
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
		var r = window.location.search.substr(1).match(reg); 
		if (r != null) return unescape(r[2]); return null; 
	} 
	
	//动画的定时器
	window.requestAnimFrame=(function(){
		return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){
				window.setTimeout(callback,1000/60)}
	})();
				var totalDeg=360*3+0;
				var steps=[];
				var lostDeg=[36,66,96,156,186,216,276,306,336];
				//var prizeDeg=[6,126,246];
				var prizeDeg=[1,2,3];
				var prize, //记录结果  第一次是unfidend 或 null
					sncode;//兑奖时的sn码
				var count=0;
				var now=0;
				var a=0.01;
				var outter,inner,timer,running=false;
				function countSteps(){
					var t=Math.sqrt(2*totalDeg/a);
					var v=a*t;
					for(var i=0;i<t;i++){
						steps.push((2*v*i-a*i*i)/2)
					}
					steps.push(totalDeg)
				}
				//旋转停止后执行
				function step(){
					//一直在旋转...
					outter.style.webkitTransform='rotate('+steps[now++]+'deg)';
					outter.style.MozTransform='rotate('+steps[now++]+'deg)';
					if(now<steps.length){
						requestAnimFrame(step)
					}else{
						//停止旋转时执行
						running=false;
						setTimeout(function(){
							if(prize!=null){
								$("#sncode").text(sncode);
								var type="";
							if(prize==1){
								type="一等奖";
							}else if(prize==2){
								type="二等奖";
							}else if(prize==3){
								type="三等奖";
							}
							//中奖后显示出提交手机码等信息的div
							$("#prizetype").text(type);
							$("#result").slideToggle(500);
							$("#outercont").slideUp(500);
							}else{
								alert("谢谢您的参与，下次再接再厉")
							}
						},200)
					}
				}
					
				//开始旋转
				function start(deg){
					//随机数确定结果
					deg=deg||lostDeg[parseInt(lostDeg.length*Math.random())];
					running=true;clearInterval(timer);//移除定时器
					totalDeg=360*5+deg;
					steps=[];
					now=0;
					countSteps();
					requestAnimFrame(step)
				}
							
				window.start=start;
				outter=document.getElementById('outer');
				inner=document.getElementById('inner');
				i=10;
				
								//点击旋转转盘
								$("#inner").click(function(){

									if(running)
										return;
									if(count>=3){
										alert("您已经抽了 3 次奖。");
										return
									}if(prize!=null){
										alert("亲，你不能再参加本次活动了喔！下次再来吧~");
										return
									}
									
									var openid = $("#openid").val();
									
									$.ajax({
										url:"${pageContext.request.contextPath}/activity/turnatble.do",
										dataType:"json",
										data:{openid:openid,t:Math.random()},
										// 禁用按钮防止重复提交
										beforeSend:function(){
											running=true;
											timer=setInterval(function(){
												i+=5;
												outter.style.webkitTransform='rotate('+i+'deg)';
												outter.style.MozTransform='rotate('+i+'deg)'
											},1)
										},
										success:function(data){
											
												if(data.error=="invalid"){
													alert("您已经抽了 3 次奖。");
													count=3;clearInterval(timer);
													return
												}
												if(data.error=="getsn"){
													alert('本次活动你已经中过奖，本次只显示你上次抽奖结果!兑奖SN码为:'+data.sn);
													count=3;
													clearInterval(timer);
													prize=data.prizetype;
													sncode=data.sn;
													start(prizeDeg[data.prizetype-1]);
													return;
												}if(data.success){
													//后台设置抽奖结果
													prize=data.prizetype;//(奖品类型)
													//设置中奖的 兑奖sn码
													sncode=data.sn;
													start(prizeDeg[data.prizetype-1])
												}else{
													prize=null;
													start()
												}
												running=false;
												count++
											},error:function(){
												prize=null;
												start();
												running=false;
												count++
											},timeout:4000})
									})
});
					
					//中奖后提交表单执行方法
					$("#save-btn").bind("click",function(){
						var btn=$(this);
						var tel=$("#tel").val();
						if(tel==''){alert("请输入手机号码");
							return
						}
						var regu=/^[1][0-9]{10}$/;
						var re=new RegExp(regu);
						if(!re.test(tel)){alert("请输入正确手机号码");
							return
						}
						var submitData={tid:5,code:$("#sncode").text(),tel:tel,action:"setTel"};

						$.post('index.php?ac=activityuser',
							submitData,function(data){
								if(data.success==true){
									alert("提交成功，谢谢您的参与");
									return
								}else{

						}},"json")
					});
</script>
</body>
</html>
